<template>
	<view class="login">
		<view class="logo-box">
			<image :src="logo" mode="widthFix" class="logo"></image>
			<view v-if="name">{{ name }}</view>
		</view>
		<view class="form">
			<view class="input"><input type="text" placeholder="请输入账号" v-model="log_info.username" /></view>
			<view class="input" style="position: relative;">
				<input :type="psd_type" placeholder="请输入密码" v-model="log_info.password" style="border: none; outline: none;font-size: 32rpx;padding: 0;" />
				<view class="show-psw" @tap="togPsd" style="position: absolute;right: 20rpx;">
					<image :src="!showPsw ? '../../static/eyeclose.png' : '../../static/eyeopen.png'" mode="widthFix">
					</image>
				</view>
			</view>
			<view class="reg-for">
				<view class="reg" @click="gotoRegister()">没有账号，去注册 ></view>
			</view>
			<view class="btn" @click="Log">登录</view>
		</view>
		<view class="footer">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	import {mapActions} from 'vuex';
	export default {
		data() {
			return {
				//logo、name这两个属性是为了避免提示错误暂时留着的，后边优化时处理掉
				logo: '',
				name: '',
				// u_info: {},
				showPsw: false,
				showPswTwice: false,
				psd_type: 'password',
				psd_type2: 'password',
				log_info: {
					username: '',
					password: ''
				}
			};
		},
		methods: {
			//映射vuex中的actions,因为划分了命名空间，所以此处需要注意写法要求。
			...mapActions('userAbout',{login:'login',setUser:'setUser'}),
			...mapActions('cartAbout',{getCart:'getCart'}),
			gotoRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			togPsd() {
				this.showPsw = !this.showPsw;
				if (this.showPsw) {
					this.psd_type = 'text';
				} else {
					this.psd_type = 'password';
				}
			},
			Log() {
				if (!this.log_info.username || !this.log_info.password) {
					uni.showToast({
						title: '账号或密码为空',
						icon: 'none'
					});
					return;
				}
				this.handleLogin();
			},
			async handleLogin() {
				const loginData = {
					username: this.log_info.username,
					password: this.log_info.password,
				};
				//执行actions中映射过来的login方法
				const res = await this.login(loginData);
				//登录成功，记录用户信息
				if (res.data.code == 200) {
					const userInfo = res.data.data;
					//登录成功后将用户信息存入store
					this.setUser(userInfo);
					this.getCart(userInfo.id);
					uni.showToast({
						title: '登录成功了',
						duration: 1000,
						//跳转到tabbar页面只能用switchtab
						success() {
							//uni.showToast的success回调会在toast开始显示时立即触发，而不是等待duration结束后触发
							setTimeout(() => {
								uni.switchTab({
									url:'/pages/index/index'
								});
							}, 1000);
						}
					});
				} else {
					uni.showToast({
						title:res.data.message,
						duration: 2000
					})
				}
			}
		}
	};
</script>

<style>
	uni-input {
		margin-left: 0 !important;
	}
</style>
<style lang="scss" scoped>
	.login {
		.logo-box {
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 50rpx 0;

			.logo {
				width: 300rpx;
			}

			view {
				font-size: 40rpx;
				font-weight: 600;
			}
		}

		.form {
			padding: 0 80rpx;

			.input {
				display: flex;
				align-items: center;
				border-bottom: 1px solid rgba(221, 221, 221, 1);
				padding-bottom: 20rpx;
				margin-bottom: 35rpx;
				font-size: 32rpx;

				image {
					width: 35rpx;
				}

				input {
					flex: 1;
					margin-left: 20rpx;
				}
			}

			.psd {
				justify-content: space-between;
				margin-bottom: 20rpx;
			}

			.reg-for {
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 50rpx;

				.reg {
					color: #1890FF;
				}
			}

			.btn {
				color: RGBA(255, 255, 255, 1);
				background-color: #31cc4b;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				font-size: 36rpx;

			}
		}

		.footer {
			position: absolute;
			bottom: 0;
			width: 100%;
		}
	}
</style>
